<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{user.info}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/3;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{getRoleInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'roleUuid',name : 'roleUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{role.name}]]*/"",name : 'roleName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{role.remarks}]]*/"",name : 'remarks',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'roleUuid',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var htmlContent = '<a href="#" onclick="deleteRole(\''+ v + '\')"><i  style="color: #2f332a">删除</i></a>'+
                                '<a href="#" onClick="modifyRole(\''+ v + '\')"><i style="color: #2f332a">修改</i></a>';
                            return htmlContent
                        }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });
            queryBtn();

            $("#query-btn-id").click(function (event) {
                event.stopPropagation();
                queryBtn();
            })
            // 增加
            $("#add-btn-id").click(function (event) {
                event.stopPropagation();
                $("#add-role-dialog-id").dialog('open');
            })

            $("#add-role-dialog-id").dialog({
                autoOpen:false,
                width:400,
                modal:true,
                resizable:false,
                title:/*[[#{role.add.tip.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            console.log("点击")
                            $("#add-role-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]

            });
            $("#add-role-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#add-role-dialog-id").dialog('close')
                    queryBtn();

                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                },
                complete : function(response, status) {

                }

            })



            $("#modify-role-dialog-id").dialog({
                autoOpen:false,
                width:400,
                modal:true,
                resizable:false,
                title:/*[[#{role.modify.tip.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            console.log("我是提交按钮")
                            $("#modify-role-form-id").submit()

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]

            });

            $("#modify-role-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#modify-role-dialog-id").dialog('close')
                    queryBtn();

                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                },
                complete : function(response, status) {

                }

            })
            $("#confirm-user-del-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.delete.tip.titile}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid = $("#confirm-user-del-id").attr("userUuid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{deleteUserById}]]*/'',
                                data: [{name: "userUuid", value: userUuid}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#confirm-user-del-id").dialog( "close" );
                                    queryBtn();
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });

            $("#allocate-btn-id").click(function (event) {
                event.stopPropagation()
                //$("#allocate-dialog-id").dialog('open')
                allocateZtree();

            });


            $("#allocate-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.menu.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var roleUuid = $("#allocate-dialog-id").attr("roleUuid");
                            var menuIds = [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allocate-role-ztree");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            $(nodes).each(function (index,item) {
                                menuIds.push(item.id);
                            });

                            $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{saveMenuByRoleId}]]*/'',
                                    data: [
                                        {name:"roleUuid",value:roleUuid},
                                        {name:"menuIds",value:menuIds}
                                    ],
                                    success: function (data) {
                                        message(data.msg);
                                        $("#allocate-dialog-id").dialog('close');
                                    },
                                    error: function(msg){
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                }
                            );



                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });

            //确认删除对话框
            $("#confirm-role-del-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.delete.tip.titile}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var roleUuid = $("#confirm-role-del-id").attr("roleUuid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{deleteRoleById}]]*/'',
                                data: [{name: "roleUuid", value: roleUuid}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#confirm-role-del-id").dialog( "close" );
                                    queryBtn();
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });

        });//ready

        function deleteRole(roleUuid) {
            $("#confirm-role-del-id").attr("roleUuid",roleUuid);
            $("#confirm-role-del-id").dialog('open');
        }
        // 修改 ---------------------------------------------------------
        function modifyRole(roleUuid) {
            $("#modify-role-uuid").val(roleUuid);
            console.log($("#modify-role-uuid").val())
            $("#modify-role-dialog-id").dialog('open');
        }
        function queryBtn() {
            var searchRoleName = $("#search-role-name-id").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"searchRoleName",value:searchRoleName}
                ]
            }).flexReload();
        }
        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };


        function allocateZtree() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
            if(ids.length !== 1){
                message(/*[[#{common.select.one}]]*/'');
                return;
            }

            $("#allocate-dialog-id").attr("roleUuid",ids);

            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{getMenuZtreeListByRoleId}]]*/'',
                    data: [{name:"roleUuid",value:ids}],
                    success: function (data) {
                        $.fn.zTree.init($("#allocate-role-ztree"), allocateSetting, data);
                        $("#allocate-dialog-id").dialog('open');
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );

        }

    </script>
</head>
<body>
<div>
    <span th:text="#{role.manage.info}"></span>
    <input type="text" id="search-role-name-id" th:placeholder="#{role.name}">
    <!--    角色查找-->
    <a href="#" id="query-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.query}"></span>
    </a>
    <!--    权限分配-->
    <a href="#" id="allocate-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-tower"></i>
        <span th:text="#{role.menu.allocate}"></span>
    </a>
    <!--    新增角色-->
    <a href="#" id="add-btn-id">
        <i class="glyphicon glyphicon-plus" style="color:#2f332a"></i>
        <span th:text="#{common.add}"></span>
    </a>
</div>

<table id="flexigrid-id"></table>
<div id="confirm-user-del-id" style="display: none">
    <span th:text="#{user.delete.tip.info}"></span>
</div>
<!--    用户权限分配-->
<div id="allocate-dialog-id" style="display: none">
    <ul id="allocate-role-ztree" class="ztree">

    </ul>
</div>
<div id="confirm-role-del-id" style="display: none">
    <span th:text="#{role.delete.tip.info}"></span>
</div>
<!--    添加用户对话框-->
<div id="add-role-dialog-id" style="display: none">
    <form id="add-role-form-id" th:action="@{addRole}" method="post">
        <div class="form-group">
            <span th:text="#{role.name}"></span>
            <input class="form-control" type="text" id="add-role-name" name="roleName" th:placeholder="#{role.name}">
        </div>

        <div class="form-group">
            <span th:text="#{role.remarks}"></span>
            <input class="form-control" type="text" id="add-role-remarks" name="remarks" th:placeholder="#{role.remarks}">
        </div>
    </form>

</div>

<div id="modify-role-dialog-id" style="display: none">
    <form id="modify-role-form-id" th:action="@{modifyRole}" method="post">
        <input style="display: none" type="text" name="roleUuid" id="modify-role-uuid">
        <div class="form-group">
            <span th:text="#{role.name}"></span>
            <input class="form-control" type="text" id="modify-role-name" name="roleName" th:placeholder="#{role.name}">
        </div>

        <div class="form-group">
            <span th:text="#{role.remarks}"></span>
            <input class="form-control" type="text" id="modify-role-remarks" name="remarks" th:placeholder="#{role.remarks}">
        </div>
    </form>

</div>
</body>
</html>